/**
 * @fileOverview detail panel
 * @author huangtonger@aliyun.com
 */

const Util = require('../util/');
const Base = require('../simpleBase');

class Component extends Base {
  getDefaultCfg() {
    return {
      /**
       * 类型
       * @type {string}
       */
      type: 'detailpanel',

      /**
       * dom 容器
       * @type {dom}
       */
      container: null
    };
  }

  init() {
    this._initContainer();
  }

  _initContainer() {
    let container = this.container;
    if (container) {
      if (Util.isString(container)) {
        container = document.getElementById(container);
      }
    } else {
      throw new Error('please set the container for the detailpanel !');
    }
    this.containerDom = container;
    this.switch('canvas-selected');
  }

  switch(status) {
    const container = this.containerDom;
    const panels = container.getElementsByClassName('panel');
    Util.each(panels, panel => {
      const dataset = panel.dataset;
      if (dataset.status === status) {
        panel.style.display = 'block';
      } else {
        panel.style.display = 'none';
      }
    });
  }

  bindEvent() {
    const editor = this.editor;
    const getItems = this.getItems;
    Util.each(getItems, getItem => {
      Util.addEventListener(getItem, 'mousedown', () => {
        const dataset = getItem.dataset;
        const page = editor.getCurrentPage();
        page.beginAdd(dataset.type, {
          shape: dataset.shape
        });
      });
    });
    Util.addEventListener(window, 'mouseup', () => {
      const page = editor.getCurrentPage();
      page.cancelAdd();
    });
  }
}

module.exports = Component;
